<template>
  <transition name="changeHeight">
    <div class="able-back" v-if="breadcrumbList.length > 1 && $route.meta">
      <span class="AbleClick" @click="$router.back()"
        ><i class="el-icon-back"></i> {{ breadcrumbList[0] }}</span
      >
    </div>
  </transition>
</template>

<script>
export default {
  name: 'breadcrumb',
  data() {
    return {
      breadcrumbList: [],
    }
  },
  watch: {
    $route(to, from) {
      this.getbreadcrumb()
    },
  },
  methods: {
    getbreadcrumb() {
      this.breadcrumbList = this.getMatched(this)
    },
  },
  mounted() {
    this.getbreadcrumb()
  },
}
</script>

<style scoped>
.able-back {
  margin: 2vh 5% -2vh;
  text-align: left;
}
.able-back > .AbleClick {
  color: #425068;
}
.able-back > .AbleClick:hover {
  color: #3d7eff;
}
.changeHeight-leave-active,
.changeHeight-enter-active {
  height: 14px;
  -webkit-transition: all 0.15s ease;
  -moz-transition: all 0.15s ease;
  -o-transition: all 0.15s ease;
  transition: all 0.15s ease;
}
.changeHeight-enter,
.changeHeight-leave-to {
  opacity: 0;
  height: 0;
  margin: 0 5%;
  overflow: hidden;
}
</style>
